<template>
  <span>
    <!--<transition
      v-on:before-enter="beforeEnter"
      v-on:enter="enter"
      v-on:after-enter="afterEnter"

      v-on:before-leave="beforeLeave"
      v-on:leave="leave"
      v-on:after-leave="afterLeave"
    >
      <div class="ff-popover" v-show="popover_show" ref="popper">
        <slot>{{ content }}</slot>
      </div>
    </transition>-->
    <!--<el-collapse-transition>
      <div class="ff-popover" v-show="popover_show" ref="popper">
        <div class="ff-popover&#45;&#45;content">
          <slot>{{ content }}</slot>
          <div class="ff-popover&#45;&#45;triangle"></div>
        </div>
      </div>
    </el-collapse-transition>-->
    <transition name="el-zoom-in-top">
      <div class="ff-popover" v-show="popover_show" ref="popper">
        <div class="ff-popover--content">
          <slot>{{ content }}</slot>
          <div class="ff-popover--triangle"></div>
        </div>
      </div>
    </transition>
    <slot name="reference"></slot>
  </span>
</template>
<style lang="less">
  .ff-popover {
    position: absolute;
    .ff-popover--content {
      position: relative;
      white-space: nowrap;
      box-sizing: border-box;
      text-overflow: ellipsis;
      margin-top: 12px;
      padding: .4em 0;
      font-size: 12px;
      border: 1px solid rgba(0,0,0,.1);
      background: #fff;
      border-radius: .2em;
      z-index: 1;
      box-shadow: 0 .05em .85em rgba(0,0,0,.1);
      color: #575757;
    }
  /*&::before {
     position: absolute;
     content: '';
     padding: .35em;
     top: -.4em;
     left: 1em;
     background: inherit;
     border: inherit;
     border-right: 0;
     border-bottom: 0;
     transform: rotate(45deg);
     z-index: -1;
  }*/
    .ff-popover--triangle {
      position: absolute;
      padding: .35em;
      top: -.4em;
      left: 1em;
      background: inherit;
      border: inherit;
      border-right: 0;
      border-bottom: 0;
      transform: rotate(45deg);
      z-index: -1;
    }
  }
</style>
<script>
  import { on, off, addClass, removeClass } from '@/unit/dom.js'
  /*import Transition from '@/mixins/transition.js';*/
  export default {
    name: "FfPopover",
    props: {
      content: String,
    },
    /*mixins: [Transition],*/
    data () {
      return {
        popover_show: false,//控制内容的显示
      }
    },
    components: {
      /*ElCollapseTransition*/
    },
    watch: {
      popover_show (val) {
        if(val){
          this.createPopover();
        }
      }
    },
    methods: {
      showPopper () {
        this.popover_show = !this.popover_show;
      },//显示消失气泡框
      createPopover () {
        let reference = this.$refs.reference;
        let popper = this.$refs['popper'];
        let top = reference.offsetTop + reference.offsetHeight;
        let left = reference.offsetLeft;
        let width = reference.offsetWidth;
        popper.setAttribute('style', `left: ${left}px; top: ${top}px; width: ${width}px; transform-origin: center top 0px;`);
        document.body.appendChild(popper);
      },//生成组件并添加到body下面
    },
    mounted () {
      let reference = this.$refs.reference;//找到这个添加进去的内容
      on(reference, 'click', this.showPopper);//为这个内容添加这个组件的监听事件
    },
    destroyed () {
      let reference = this.$refs.reference;
      off(reference, 'click', this.showPopper);//为这个内容删除这个组件的监听事件
    }
  }
</script>
